import React, { useRef } from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, Tag, Space, Dropdown } from 'antd';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import request from 'umi-request';
import GetTime from '@/components/GetTime'

const Achievement = () => {
  const actionRef = useRef()

  const columns = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: 'ID',
      dataIndex: 'id',
      copyable: true,
      ellipsis: true,
      hideInSearch:true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '姓名',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '考试名称',
      dataIndex: 'exam',
      hideInSearch:true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '部门',
      dataIndex: 'state',
      filters: true,
      onFilter: true,
      valueType: 'select',
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        open: {
          text: '一级部门',
          status: 'Error',
        },
        closed: {
          text: '二级部门',
          status: 'Success',
        },
        processing: {
          text: '三级部门',
          status: 'Processing',
        },
      },
    },
    {
      title: '分数排名',
      dataIndex: 'state',
      filters: true,
      onFilter: true,
      valueType: 'select',
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        open: {
          text: '最高分',
          status: 'high',
        },

        processing: {
          text: '平均分',
          status: 'average',
        },
        closed: {
          text: '最低分',
          status: 'lowest',
        },
      },
    },
    {
      title: '得分',
      dataIndex: 'score',

    },
    {
      title: '最后交卷时间',
      key: 'showTime',
      dataIndex: 'created_at',
      valueType: 'date',
      sorter: true,
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
  ];
  return (
    <PageContainer header={{
      extra: [
        <GetTime key="getTime"/>
      ]
    }}>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}, sort, filter) => {
      }}
        editable={{
        type: 'multiple',
      }}
        rowKey="id"
        search={{
        labelWidth: 'auto',
      }}
        form={{
        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
        pagination={{
        pageSize: 5,
      }}
        dateFormatter="string"
        headerTitle="高级表格"
        toolBarRender={() => [
        <Button key="button" icon={<PlusOutlined />} type="primary">
          新建
        </Button>,
        <Dropdown>
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
        />
    </PageContainer>
  )
}

export default Achievement
